<template>
  <div class="singlePage">
    <breadMenu :list="breadList"></breadMenu>
    <div class="width1200">
      <leftMenu ref="leftMenu"
                title="新闻中心"
                des="News"
                @handleClick="handleClick"></leftMenu>
      <div class="routerView">
        <router-view :list="list"
                     :total="total"
                     @currentChange='currentChange'></router-view>
      </div>
    </div>
  </div>
</template>

<script>
import breadMenu from '@/views/Main/module/breadMenu'
import leftMenu from '@/components/leftMenu'
import bottomFooter from "@/views/Main/module/bottomFooter";
export default {
  name: 'newsCenter',
  components: {
    breadMenu,
    leftMenu,
    bottomFooter
  },
  data() {
    return {
      condition: {
        page: 0,
        pageSize: 10,
        portalSelect: '2',
      },
      total: 0,
      list: [],
      title: '',
      breadList: [],
    }
  },
  methods: {
    handleClick(e) {
      this.title = e.title
      if (e.title == '新闻中心') {
        this.newQuery()
      } else {
        this.announcementQuery()
      }
    },
    newQuery() {
      this.breadList = ['资讯中心', '新闻中心']
      this.$api.newQuery(this.condition).then((res) => {
        this.list = res.data.data
        this.total = res.data.recordsTotal
      })
    },
    announcementQuery() {
      this.breadList = ['资讯中心', '通知公告']
      this.$api.announcementQuery(this.condition).then((res) => {
        this.list = res.data.data
        this.total = res.data.recordsTotal
      })
    },
    currentChange(e) {
      this.condition.page = e - 1
      if ((this.title = '通知公告')) {
        this.newQuery()
      } else {
        this.announcementQuery()
      }
    },
  },
  mounted() {
    ;(this.$refs.leftMenu.menuList = [
      {
        title: '新闻中心',
        name: 'newsList',
      },
      {
        title: '通知公告',
        name: 'newsList',
      },
    ]),
      this.newQuery()
  },
}
</script>

<style scoped lang="less">
.width1200 {
  padding-top: 30px;
  display: flex;
  justify-content: space-between;
  .routerView {
    width: 980px;
    overflow-y: auto;
    height: 80rem;
  }
}
</style>